<template>
  <div id="api_doc" :style="`height:${docHeight}`">
    <el-card v-loading="loading" shadow="never">
      <iframe :src="src" :width="width" frameborder="no" class="iframe" :style="`height:${iframeHeight}`" scrolling="auto" />
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'Swagger',
  data() {
    return {
      src: process.env.VUE_APP_BASE_API + '/doc.html',
      // iframe 高度
      iframeHeight: document.documentElement.clientHeight - 202.5 + 'px;',
      // 背景颜色高度
      docHeight: document.documentElement.clientHeight - 107 + 'px;',
      width: '30%',
      loading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 1000)
    const that = this
    window.onresize = function temp() {
      that.iframeHeight = document.documentElement.clientHeight - 202.5 + 'px;'
      that.docHeight = document.documentElement.clientHeight - 107 + 'px;'
    }
  }
}
</script>

<style lang="scss" scoped>
#api_doc {
  padding: 24px;
  background-color: #f5f7f9;
}
.iframe {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
